<template>
    <div>
        <el-card style="max-width:100%">

            <h3>
                <img src="../../images/6f1eaa293f0c517c1592000f2e2d233.jpg" alt="" srcset=""
                     style="width: 40px; float: left;margin-left: 0%; margin-right: 20px;">
                华亿达小游戏管理系统
            </h3>
        </el-card>
        <div style="margin-top: 10px; background-color: white;">

            <el-card style="max-width:100%; max-height: 100%;">
                <div style="margin-left: 40%; background-color: white;">
                    <el-form ref="ruleFormRef" style="max-width: 300px" :model="ruleForm" status-icon :rules="rules"
                             label-width="auto" class="demo-ruleForm">
                        <el-form-item label="账户" prop="pass">
                            <el-input v-model="ruleForm.pass" type="text" autocomplete="off"/>
                        </el-form-item>
                        <el-form-item label="密码" prop="checkPass">
                            <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)"
                                       style="background-color:#95D475; width: 100%;">
                                登入
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>

    </div>

</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {useRouter} from 'vue-router';

let rouer = useRouter()

const ruleFormRef = ref<FormInstance>()


const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入账号'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass')
        }
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error(' 请输入密码'))

    } else {
        callback()
    }
}

const ruleForm = reactive({
    pass: '',
    checkPass: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
    pass: [{validator: validatePass, trigger: 'blur'}],
    checkPass: [{validator: validatePass2, trigger: 'blur'}],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit')
            rouer.replace('/GameECPM')

        } else {
            console.log('error submit!')
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style lang="scss" scoped></style>